init();

function init() {
  initTodoList;
}

var initTodoList = (function() {
  var showInput = document.getElementsByClassName('j-show-input')[0],
      inputWrap = document.getElementsByClassName('input-wrap')[0],
      addBtn = document.getElementsByClassName('j-add-btn')[0],
      oListWrap = document.getElementsByClassName('list-wrap')[0],
      oList = document.getElementsByClassName('j-list')[0],
      inputShow = false,
      isEdit = false, // 编辑状态
      curIdex = null  // 当前项

  addEvent(showInput, 'click', function() {
    if(!inputShow) {
      inputWrap.style.display = 'block';
      oListWrap.style.display = 'block';
      textInput.focus();
      inputShow = !inputShow;
    }else {
      inputWrap.style.display = 'none';
      oListWrap.style.display = 'none';
      inputShow = !inputShow;
    }
  });

  addEvent(addBtn, 'click', function() {
    var oItems = document.getElementsByClassName('item'),
        itemLen = oItems.length,
        item,
        val = textInput.value, // 输入的待办事项值
        len = val.length;

    if(isEdit) {
      for(var i = 0; i < itemLen; i ++) {
        // 寻找第一个子元素p标签
        item = elemChildren(oItems[i])[0];
  
        var text = item.innerText;
        if(text === val) {
          return alert('您已经添加过该事项哦');
        }
      }

      var itemContent = elemChildren(oItems[curIdex])[0],
          liParent = itemContent.parentNode;

      itemContent.innerText = val;
      console.log(itemContent.innerText);

      textInput.value = '';
      isEdit = false; // 将编辑状态改为否
      addBtn.innerText = '增加项目';  // 将btn改为非编辑状态
      liParent.className = 'item'; // 将li的编辑状态激活类清空

    }else {
      if(!len) {
        return alert('请输入待办事项');
      }  

      var oLi = document.createElement('li');
      oLi.className = 'item j-item';
      oLi.innerHTML = itemTpl(val);
      oList.appendChild(oLi);
      textInput.value = '';
    }
  });

  addEvent(oList, 'click', function(e) {
    var e = e || window.event,
        tar = e.target || e.srcElement,
        liParent = elemParent(tar, 2),
        oItems = document.getElementsByClassName('item'),
        itemLen = oItems.length,
        item,
        // 点击的第几项
        tarIdx = Array.prototype.indexOf.call(oItems, liParent),
        className = tar.className;

    if(className === 'edit') {

      for(var i = 0; i < itemLen; i ++) {
        item = oItems[i];
        item.classList = 'item';
      }

      textInput.focus();
      liParent.className += ' active';
      curIdex = tarIdx;
      addBtn.innerText = '第' + (curIdex + 1) + '项';

      isEdit = true;

      var itemContent = elemChildren(oItems[curIdex])[0];
      textInput.value = itemContent.innerText;

    }else if(className === 'remove') {
      liParent.remove();
    }
  });

  function itemTpl(text) {
    return (
      '<p class="item-content">' + text + '</p>' +
      '<div class="btn-group">' +
        '<a href="javascript:;" class="edit"> 🐔 </a>' +
        '<a href="javascript:;" class="remove"> 🍵 </a>' +
      '</div>'
    )
  }

})();